<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新时的一个问题</title>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>{{title}}</h2>
        <button @click="changeTitle">更新标题</button><br><br>
        <!-- 遍历数据 -->
        <button @click="updateMei">更新马东信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
 
    </div>


    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                keywords: '',
                title:'一年一度喜剧大赛',
                sortType:0, // 0原顺序， 1降序，2升序
                persons: [
                    { id: '001', name: "马东 ", age: 30 },
                    { id: '002', name: "马冬梅", age: 20 },
                    { id: '004', name: "王艳", age: 18 },
                    { id: '003', name: "梅艳芳", age: 19 }
                ]
            },
            methods: {
                updateMei () {
                    // data内部是数组写法
                    // this.persons.splice(0,1, { id: '001', name: "马老师 ", age: 30 })
                    Vue.set(this.persons,0,{ id: '001', name: "马老师 ", age: 30 })
                },
                changeTitle(){
                    this.title = '喜人奇妙夜'
                }
            }
        })
    </script>

</body>

</html>